<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <!-- import Vue.js -->
    <script src="http://vuejs.org/js/vue.min.js"></script>
    <!-- import stylesheet -->
    <link rel="stylesheet" href="http://unpkg.com/iview/dist/styles/iview.css">
    <!-- import iView -->
    <script src="http://unpkg.com/iview/dist/iview.min.js"></script>
    <!-- import jquery -->
    <script src="../../lib/jquery-3.4.1.min.js"></script>
    <!-- import highlight -->
    <script src="../../lib/highlight.pack.js"></script>
    <!-- import dark.css -->
    <link rel="stylesheet" href="../../lib/styles/dark.css">
    <!-- 引入 VContextmenu 组件 -->
    <script src="../../lib/contextmenu.js"></script>
    <!-- 引入 VContextmenu 组件样式 -->
    <link rel="stylesheet" href="../../lib/contextmenu.css">
    <style>
        .paging {
            margin: auto;
            margin-top: 10px;
        }
        
        #app {
            margin-top: 25px;
            text-align: center;
        }
        
        #app2 {
            margin-top: 20px;
            text-align: center;
        }
        
        .codeBox {
            width: 100%;
            height: 40%;
            margin: auto;
            flex: 2.5;
        }
        
        #app3 {
            margin-top: 25px;
            margin-left: 15px;
            width: 80%;
            height: 40%;
            text-align: left;
            flex: 2.5;
        }
        
        #main {
            height: 90%;
            width: 80%;
            top: 35px;
            margin: auto;
            text-align: center;
        }
    </style>
</head>

<body style="background-color: rgb(30, 30, 30); height: 100%;">
    <!-- 顶部搜索框 -->
    <div id='app2'>
        <i-input search enter-button placeholder="Enter something..." style="width: 40%; margin: auto" @on-search="search" @on-enter="search" />
    </div>
    <div id='main'>
        <!-- tree菜单栏 -->
        <div id='app3' style="color: white">
            <h2>API菜单</h2>
            <Tree :data="data1"></Tree>
        </div>
        <!--  分隔栏 -->
        <!--分页/代码框-->
        <div id='menu'>
            <v-contextmenu ref="contextmenu">
                <v-contextmenu-item @click='newFile'>新建</v-contextmenu-item>
                <v-contextmenu-item @click='copy'>复制</v-contextmenu-item>
                <v-contextmenu-item @click='analysis'>分析</v-contextmenu-item>
            </v-contextmenu>
            <div v-contextmenu:contextmenu>
                <div id='app'>
                    <Divider style="background-color:white"></Divider>
                    <h3 style="text-align: left">[{{ language }}]</h3>
                    <div class='codeBox'>
                        <div v-highlight>
                            <pre>
                            <code :class="language" v-text="content" style="height: 28vh"></code>
                        </pre>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        Vue.directive('highlight', function(el) {
            let blocks = el.querySelectorAll('pre code');
            blocks.forEach((block) => {
                hljs.highlightBlock(block);
            })
        })
        var vm2 = new Vue({
            el: '#app2',
            data: {
                value: undefined,
            },
            methods: {
                search() {
                    console.log('yes');
                }
            }
        });

        var vm = new Vue({
            el: '#app',
            data: {
                language: 'javascript',
                content: 'console.log("hello world")'
            }
        });
        var vm3 = new Vue({
            el: '#app3',
            data: {
                data1: [{
                    title: 'parent 1',
                    expand: true,
                    children: [{
                        title: 'parent 1-1',
                        style: "color: white",
                        expand: true,
                        children: [{
                            title: 'leaf 1-1-1'
                        }, {
                            title: 'leaf 1-1-2'
                        }]
                    }, {
                        title: 'parent 1-2',
                        expand: true,
                        children: [{
                            title: 'leaf 1-2-1'
                        }, {
                            title: 'leaf 1-2-1'
                        }]
                    }]
                }]
            },
            methods: {
                show(name) {

                }
            }
        });
        var vm4 = new Vue({
            el: '#menu',
            data: {

            },
            methods: {
                newFile() {
                    console.log('this is new');
                },
                copy() {
                    console.log('this is copy');
                },
                analysis() {
                    console.log('this is analysis');
                }
            }
        });
    </script>


</body>

</html>